<template>
  <div class="armlList">
    <div v-for="item in dataList" class="item" :key="item.id">
      <!-- 封面图片区域 -->
      <div class="converUrl" :style="converStyle">
        <ProcessedImage
          :src="getImgSrc(item)"
          params="imageView2/2/w/64/h/64"
        />
      </div>
      <!-- 右侧内容区域 -->
      <div class="r-item">
        <div class="title">{{ item.name }}</div>
        <!-- 动态描述区域 -->
        <div class="des" v-html="getDescription(item)"></div>
        <!-- 创建时间显示 -->
        <div class="time" v-if="activeName !== '推荐应用'">
          {{ item.create_time }}
        </div>
      </div>
      <div class="icon-box" v-if="activeName !== '推荐应用'">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="编辑"
          placement="top"
          v-if="activeName == '营销图库'"
        >
          <i class="iconfont icon-bianji" @click="editMarke(item)"></i>
        </el-tooltip>
        <el-tooltip
          class="box-item"
          effect="dark"
          content="下载"
          placement="top"
        >
          <i class="iconfont icon-xiazai" @click="download(item)"></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
// 下载资源文件/图片
import { downloadImage } from '@/utils';
// 下载次数在对应页面排序会用到
import { addDownloadNum } from '@/api/serviceCenter';
const emits = defineEmits(['edit']);
// 接收传入的 props
const { dataList, activeName } = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
  activeName: {
    type: String,
    default: '',
  },
});

// 计算动态样式
const converStyle = computed(() => ({
  width: activeName !== '推荐应用' ? '139px' : '64px',
}));
// 根据不同类型获取图片链接
const getImgSrc = (row) => row?.img || row?.cover_img || row?.poster || '';

// 根据选项卡类型生成描述内容
const getDescription = (item) => {
  const descriptions = {
    推荐应用: `类型： ${item.type === '1' ? '主应用' : '其他'} ｜ 出品方：${item.produce || '-'} ｜ 适用对象：${item.targetObj || '-'}`,
    资源下载: item.className || '--',
    营销图库: item.className || '--',
    高招直播: item.school || '--',
  };
  return descriptions[activeName] || '--';
};
// 营销图编辑弹窗
const editMarke = (row) => {
  emits('edit', row);
};

// 下载
const download = async (row) => {
  row.fileType == 'pdf'
    ? window.open(row.file, '_blank')
    : await downloadImage(row.file, row.name);

  if (['资源下载', '营销图库'].includes(activeName)) {
    // 下载完成后增加下载次数
    await addDownloadNum({
      type: activeName === '资源下载' ? '2' : '1',
      id: row.id,
    });
  }
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
